﻿<!DOCTYPE html>
<!--[if lt IE 7]><html class="ie ie6" lang="zh-cn"><![endif]-->
<!--[if IE 7]><html class="ie ie7" lang="zh-cn"><![endif]-->
<!--[if IE 8]><html class="ie ie8" lang="zh-cn"><![endif]-->
<!--[if IE 9]><html class="ie ie9" lang="zh-cn"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html lang="zh-cn"><!--<![endif]-->
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="../css/rule.css">
</head>
<body>

<h2 class="rule_hd">命名规则</h2>
<div class="rule_cont">
    <!--S MD content -->
    <h3 id="为什么命名很重要">为什么命名很重要</h3>
    <ol style="list-style-type: decimal">
        <li>快速高效开发（命名费时，大家都有同感）；</li>
        <li>安全（解耦无依赖）；</li>
        <li>方便维护（一目了然的命名，无耦合的模块化规范）；</li>
        <li>方便复用（高度抽象、细粒度、可拼装的组件）</li>
    </ol>
    <h3 id="模块命名">模块命名</h3>
    <ul>
        <li><p>全站公共模块可使用mod_为前缀。</p>
        比如：<code>mod_btn</code></li>
        <li><p>业务公共模块可使用{业务名称缩写}_mod_为前缀。</p>
        <p>比如：<code>ss_mod_btn、dl_mod_big_list_2</code></p></li>
    </ul>
    <p>PS: 对模块/组件重置样式时，需要自己加入新的样式名来进行差异化表现。</p>
    <h3 id="普通命名">普通命名</h3>
    <ul>
        <li><p>大部分情况下使用长命名（继承父级的className），安全起见，外层布局模块必须使用长命名。</p>
        比如：<code>.hotlist &gt; .hotlist_hd &gt; .hotlist_hd_extra</code></li>
        <li><p>内部元素根据情况(比如可判定该结构中不会再嵌套其他元素时)可使用短单词命名。</p>
        比如：<code>tit、more。</code></li>
        <li><p>可嵌入式模块（一般模块体积小，常用于放在页面上的其他模块内部），可使用前缀来区别。</p></li>
    </ul>
    <h3 id="图片命名">图片命名</h3>
    <p>一般来说，我们使用png格式，偶尔需要使用到png24位图片格式，我们建议在这类图片文件名后加上位数标识。</p>
    <p>比如：<code>ico_all_24.png</code></p>
    <h3 id="css3动画命名">css3动画命名</h3>
    <p>css3动画命名和ico保持一致，统一使用ani_xx命名。其中ani是animation的缩写。</p>
    <h3 id="常用命名词汇">常用命名词汇</h3>
    <!--E MD content -->

    <!--S 常规词汇 -->
    <table >
        <thead>
            <tr>
                <th>单词</th><th>描述</th>
                <th>单词</th><th>描述</th>
                <th>单词</th><th>描述</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    header
                </td>
                <td>头部</td>
                <td>
                    list
                </td>
                <td>列表</td>
                <td>
                    dig
                </td>
                <td>投票 / 顶</td>
            </tr>
            <tr>
                <td>
                    logo
                </td>
                <td>
                    logo
                </td>
                <td>
                    item
                </td>
                <td>列表项</td>
                <td>
                    bury
                </td>
                <td>踩   相对于dig</td>
            </tr>
            <tr>
                <td>
                    nav
                </td>
                <td>导航</td>
                <td>
                    tab
                </td>
                <td>切换标签</td>
                <td>
                    open
                </td>
                <td>打开</td>
            </tr>
            <tr>
                <td>
                    container
                </td>
                <td>主要容器</td>
                <td>
                    item
                </td>
                <td>列表项</td>
                <td>
                    get
                </td>
                <td>获取</td>
            </tr>
            <tr>
                <td>
                    main
                </td>
                <td>主体</td>
                <td>
                    tips
                </td>
                <td>提示气泡框</td>
                <td>
                    apply
                </td>
                <td>申请 / 应用</td>
            </tr>
            <tr>
                <td>
                    sub
                </td>
                <td>附属</td>
                <td>
                    btn
                </td>
                <td>按钮 – button的缩写</td>
                <td>
                    del
                </td>
                <td>删除 – delete的缩写</td>
            </tr>
            <tr>
                <td>
                    title
                </td>
                <td>标题</td>
                <td>
                    ico
                </td>
                <td>图标 – icon的缩写</td>
                <td>
                    close
                </td>
                <td>关闭</td>
            </tr>
            <tr>
                <td>
                    copyright
                </td>
                <td>版权</td>
                <td>
                    wrapper
                </td>
                <td>包裹容器</td>
                <td>
                    send
                </td>
                <td>发送</td>
            </tr>
            <tr>
                <td>
                    quick
                </td>
                <td>快速_xx</td>
                <td>
                    guide/hint/tip
                </td>
                <td>指引，提示</td>
                <td>
                    advice
                </td>
                <td>建议</td>
            </tr>
            <tr>
                <td>
                    layer
                </td>
                <td>浮层，[notice]_layer</td>
                <td>
                    panel
                </td>
                <td>面板</td>
                <td>
                    channel

                </td>
                <td>频道</td>
            </tr>
            <tr>
                <td>
                    trigger
                </td>
                <td>触发点</td>
                <td>
                    gg
                </td>
                <td>广告</td>
                <td>
                    major/main
                </td>
                <td>主屏/主要内容</td>
            </tr>
            <tr>
                <td>
                    sidebar
                </td>
                <td>侧栏</td>
                <td>
                    ext/extra
                </td>
                <td>扩展内容</td>
                <td>
                    notice
                </td>
                <td>公告</td>
            </tr>
        </tbody>
    </table>
    <!--E 常规词汇 -->

    <!--S 状态词汇 -->
    <table >
        <tbody>
            <tr>
                <th>状态</th>
                <th>描述</th>
            </tr>
            <tr>
                <td> hover </td>
                <td>划过态 – 通常只生效于使用指针交互的设备</td>
            </tr>
            <tr>
                <td> disabled </td>
                <td>不可用状态 – 用于 form 、button 等。</td>
            </tr>
            <tr>
                <td>
                    active
                </td>
                <td>激活态 – 通常指 button /   link 被按下的状态</td>
            </tr>
            <tr>
                <td>
                    current
                </td>
                <td>当前态 – 用于nav 、 tab、steps、flow步骤提示。强调的是页面或模块当前状态。</td>
            </tr>
            <tr>
                <td>
                    selected
                </td>
                <td>选中态 – 用于 radio 、 button 等。强调的是按钮本身的状态。</td>
            </tr>
            <tr>
                <td>
                    focus
                </td>
                <td>获取焦点状态 – 通常用于具有   tab-index 属性的元素。常见的如 button 、 form element</td>
            </tr>
            <tr>
                <td>
                    show
                </td>
                <td>显示状态 – 控制对象显示，属于非常用词汇。</td>
            </tr>
            <tr>
                <td>
                    hide
                </td>
                <td>隐藏状态 – 控制对象隐藏。</td>
            </tr>
        </tbody>
    </table>
    <!--E 状态词汇 -->
</div>

</body>
</html>
